<template>
    <div class="fluid field myfield ">
        <field_title :title_show="!field.hideTitle&&!field.no_title" :field="field" ></field_title>
        <div class="ui segment">

            <vue-core-image-upload v-if='!$store.state.isDetail' v-bind:class="['ui','button','secondary']"
                                   v-bind:crop="false" :url="uploadUrl" extensions="png,gif,jpeg,jpg"
                                   v-on:imageuploaded="imageuploaded" v-on:errorhandle="errorhandle"
                                   v-on:imagechanged="imagechanged"
                                   v-on:imageuploading="imageuploading" inputOfFile='file' :text='placeholder'
                                   :multiple="multiple">
            </vue-core-image-upload>

            <!--<div class="ui card" v-for="img in imgs" v-if="imgs">-->
                <!--<div class="image" @click='showBigPic(img)'>-->
                    <!--<img :src="img" alt="点击可看大图">-->
                <!--</div>-->
            <!--</div>-->

            <showpics :pics='imgs' v-if="img_pre&&imgs" :imgpre='img_pre' @toRemove='toRemove' @sorted='sorted' ></showpics>

            <div class="ui inverted dimmer" v-if="uploading" :class="{active:uploading}">
                <div class="ui loader big text">uploading</div>
            </div>
        </div>

    </div>
</template>

<script>
    import tool from 'src/util/tool';
    import VueCoreImageUpload from 'vue-core-image-upload';
    import showpics from 'components/field/showpics';
    import field_title from 'components/field/com/field_title';
    const IMGPRE = tool.IMGPRE;
    import util from '_util/index';
    import _ from 'lodash';

    export default {
        data() {
            return {
                uploading: false,
                imgs: null,
                img_pre: null,
            }
        },
        methods: {
            //finish image uload
            imageuploaded(res) {
                let data = res.data
                if (res.status == tool.RS_OK) {
                    this.imgs = this.imgs?_.concat(this.imgs,data):data;
                    this.uploading = false
                } else {
                    util.showMsg(this, 'error', res.msg);
                }
            },
            // return file object
            imagechanged(res) {
                // console.log(res.name)
            },

            // uploading image
            imageuploading(res) {
                this.uploading = true
            },

            // handle some error like ajax not working
            errorhandle(err) {
                util.showMsg(this, 'error', err);
            },
            toRemove(pic) {
//                pic = this.imgs.find(str => (str.indexOf(pic) + pic.indexOf(str)) > -2);
                this.imgs.remove(pic);
            },
            sorted(plist) {
                let pics = plist.map(v => {
                    return v.replace(this.img_pre, '')
                })
                this.imgs = pics;
            },
            set_img_pre(){
                util.getHardCode(this, 'pic_dir', (rs) => {
                    let pic_dir = rs.find(item => item.id == this.field.pic_dir).title;
                    this.img_pre= `${IMGPRE}images/${pic_dir}/`;
                });
            }
        },
        watch: {
            imgs: function (val, old) {
                if (val) {
                    let vo = this.$store.state.global.editVo;
                    let out = this.field.pic_full_url ? this.fullImgs : val;
                    vo[this.field.name] = out.join('|');
                    util.store.commit(this,'setEditVo', vo);

                }
            }
        },
        components: {
            'vue-core-image-upload': VueCoreImageUpload,
            showpics,
            field_title
        },
        computed: {
            fullImgs() {
                let fullImgs = this.imgs.map(val => {
                    if (val)
                        return this.img_pre + val
                })
                return fullImgs
            },
            placeholder() {
                return `请选择图片`
            },
            uploadUrl() {
                let op = this.multiple ? 'uploadPicMul' : 'uploadPic';
                let url = tool.getApi(this, 'Upload', op);
                let param = `?pic_dir=${this.pic_dir}&is_new=1`;
                return url + param;
            },
            pic_dir(){
                return this.field.pic_dir
            },
            multiple(){
                return this.field.pic_type == 1;
            }
        },
        props: ['field'],
        created() {
            this.set_img_pre();
            let fval = this.field.fval;
            if(fval) {
                this.imgs = util.isArray(fval)?fval:fval.split('|');
            }
        },
        mounted() {
        }
    };
</script>

<style rel="stylesheet/less" scoped lang="less">
    @import "../../common/style/mixin";
    .fluid.field {
        .segment{
            .g-core-image-upload-btn {
                .sub_btn();
            }
        }

    }
</style>
